在JavaScript中，DOM（文档对象模型）提供了对HTML文档的编程接口。通过DOM，你可以动态地访问和修改HTML文档的内容、结构和样式。以下是一些常见的DOM操作语法和示例。

### 1. 获取元素

#### 通过ID获取元素

**语法：**
```javascript
document.getElementById(id);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <script>
        const element = document.getElementById("myDiv");
        console.log(element.textContent); // 输出: 这是一个段落。
    </script>
</body>
</html>
```

#### 通过类名获取元素

**语法：**
```javascript
document.getElementsByClassName(className);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div class="myClass">段落1</div>
    <div class="myClass">段落2</div>
    <script>
        const elements = document.getElementsByClassName("myClass");
        for (let i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent);
        }
        // 输出:
        // 段落1
        // 段落2
    </script>
</body>
</html>
```

#### 通过标签名获取元素

**语法：**
```javascript
document.getElementsByTagName(tagName);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <script>
        const paragraphs = document.getElementsByTagName("p");
        for (let i = 0; i < paragraphs.length; i++) {
            console.log(paragraphs[i].textContent);
        }
        // 输出:
        // 段落1
        // 段落2
    </script>
</body>
</html>
```

#### 通过选择器获取元素

**语法：**
```javascript
document.querySelector(selector);
document.querySelectorAll(selector);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <div class="myClass">段落1</div>
    <div class="myClass">段落2</div>
    <script>
        const element = document.querySelector("#myDiv");
        console.log(element.textContent); // 输出: 这是一个段落。

        const elements = document.querySelectorAll(".myClass");
        elements.forEach(element => {
            console.log(element.textContent);
        });
        // 输出:
        // 段落1
        // 段落2
    </script>
</body>
</html>
```

### 2. 修改元素内容

#### 修改文本内容

**语法：**
```javascript
element.textContent = "新的文本内容";
element.innerText = "新的文本内容";
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <script>
        const element = document.getElementById("myDiv");
        element.textContent = "新的段落内容。";
        console.log(element.textContent); // 输出: 新的段落内容。
    </script>
</body>
</html>
```

#### 修改HTML内容

**语法：**
```javascript
element.innerHTML = "新的HTML内容";
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <script>
        const element = document.getElementById("myDiv");
        element.innerHTML = "<strong>新的HTML内容。</strong>";
        console.log(element.innerHTML); // 输出: <strong>新的HTML内容。</strong>
    </script>
</body>
</html>
```

### 3. 修改元素属性

#### 设置属性

**语法：**
```javascript
element.setAttribute(attributeName, attributeValue);
element.attributeName = attributeValue;
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <a id="myLink" href="#">点击我</a>
    <script>
        const link = document.getElementById("myLink");
        link.setAttribute("href", "https://www.example.com");
        link.href = "https://www.example.com";
        console.log(link.href); // 输出: https://www.example.com
    </script>
</body>
</html>
```

#### 获取属性

**语法：**
```javascript
element.getAttribute(attributeName);
element.attributeName;
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <a id="myLink" href="https://www.example.com">点击我</a>
    <script>
        const link = document.getElementById("myLink");
        console.log(link.getAttribute("href")); // 输出: https://www.example.com
        console.log(link.href); // 输出: https://www.example.com
    </script>
</body>
</html>
```

### 4. 修改元素样式

#### 直接修改样式

**语法：**
```javascript
element.style.property = value;
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <script>
        const element = document.getElementById("myDiv");
        element.style.color = "red";
        element.style.fontSize = "20px";
    </script>
</body>
</html>
```

#### 通过类名修改样式

**语法：**
```javascript
element.classList.add(className);
element.classList.remove(className);
element.classList.toggle(className);
element.classList.contains(className);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv">这是一个段落。</div>
    <button onclick="toggleHighlight()">切换高亮</button>
    <script>
        function toggleHighlight() {
            const element = document.getElementById("myDiv");
            element.classList.toggle("highlight");
        }
    </script>
</body>
</html>
```

### 5. 创建和添加元素

#### 创建元素

**语法：**
```javascript
document.createElement(tagName);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="container"></div>
    <script>
        const container = document.getElementById("container");
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "这是一个新段落。";
        container.appendChild(newParagraph);
    </script>
</body>
</html>
```

#### 添加元素

**语法：**
```javascript
parentElement.appendChild(childElement);
parentElement.insertBefore(newElement, referenceElement);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="container">
        <p>段落1</p>
        <p>段落3</p>
    </div>
    <script>
        const container = document.getElementById("container");
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "段落2";

        const referenceParagraph = container.querySelector("p:last-child");
        container.insertBefore(newParagraph, referenceParagraph);
    </script>
</body>
</html>
```

### 6. 删除元素

#### 删除子元素

**语法：**
```javascript
parentElement.removeChild(childElement);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <div id="container">
        <p id="paraToRemove">要删除的段落</p>
        <p>段落2</p>
    </div>
    <button onclick="removeParagraph()">删除段落</button>
    <script>
        function removeParagraph() {
            const container = document.getElementById("container");
            const paragraphToRemove = document.getElementById("paraToRemove");
            container.removeChild(paragraphToRemove);
        }
    </script>
</body>
</html>
```

### 7. 事件处理

#### 添加事件监听器

**语法：**
```javascript
element.addEventListener(eventType, eventHandler);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("按钮被点击了！");
        });
    </script>
</body>
</html>
```

#### 移除事件监听器

**语法：**
```javascript
element.removeEventListener(eventType, eventHandler);
```

**示例：**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 示例</title>
</head>
<body>
    <button id="myButton">点击我</button>
    <button id="removeListener">移除监听器</button>
    <script>
        const button = document.getElementById("myButton");
        const removeButton = document.getElementById("removeListener");

        function handleClick() {
            alert("按钮被点击了！");
        }

        button.addEventListener("click", handleClick);

        removeButton.addEventListener("click", function() {
            button.removeEventListener("click", handleClick);
            alert("监听器已移除");
        });
    </script>
</body>
</html>
```

### 总结

- **获取元素**：使用`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`。
- **修改元素内容**：使用`textContent`、`innerText`和`innerHTML`。
- **修改元素属性**：使用`setAttribute`、`getAttribute`和直接访问属性。
- **修改元素样式**：使用`style`属性和`classList`方法。
- **创建和添加元素**：使用`createElement`、`appendChild`和`insertBefore`。
- **删除元素**：使用`removeChild`。
- **事件处理**：使用`addEventListener`和`removeEventListener`。

掌握这些DOM操作的基本语法和方法，可以帮助你动态地操作和控制网页内容，实现丰富的交互效果。